<template>
  <div style="position: relative; min-width: 1600px; overflow: hidden">
    <img class="visualbg" :src="visualImage" />
    <!-- <px-row style="position: absolute; width: 100%; height: 64px">
      <px-col :span="24" class="water_col">
        <div class="waterdom borderRidus boxShadow">
          <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: white; border-radius: 4px; opacity: 0.7" />
          <px-form ref="queryRef" style="position: absolute" class="custom-form-ui" :model="queryParams" :inline="true" label-width="90px">
            <px-form-item label="统计维度">
              <px-select v-model="queryParams.dimension" placeholder="请选择" style="width: 210px" filterable>
                <px-option v-for="dict in dimensionList" :key="dict.itemValue" :label="dict.itemName" :value="dict.itemValue" />
              </px-select>
            </px-form-item>
            <px-form-item v-if="queryParams.dimension == 'Y'" label="年份">
              <yearPicker :labelWidth="0" labelText="" :initYear="dateValue" @updateTimeRange="updateStatisticYear" />
            </px-form-item>
            <px-form-item v-if="queryParams.dimension == 'M'" label="月份">
              <px-date-picker
                v-model="queryParams.Time1"
                type="monthrange"
                range-separator="-"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                placeholder="请选择"
                format="YYYY-MM"
                value-format="YYYY-MM"
                @change="settime"
              />
            </px-form-item>
            <px-form-item label="厂区">
              <px-select v-model="queryParams.lev" placeholder="请选择厂区" clearable style="width: 210px" filterable>
                <px-option v-for="dict in liquidList" :key="dict.itemValue" :label="dict.itemName" :value="dict.itemValue" />
              </px-select>
            </px-form-item>
            <px-form-item label="核算边界">
              <px-select v-model="queryParams.templateId" placeholder="请选择" style="width: 210px" filterable>
                <px-option v-for="dict in typeList" :key="dict.id" :label="dict.templateName" :value="dict.id" />
              </px-select>
            </px-form-item>
            <px-button style="margin-top: -17px" type="primary" icon="" @click="handleQuery()">查询</px-button>
            <px-button style="margin-top: -17px" icon="" @click="resetQuery">重置</px-button>
          </px-form>
        </div>
      </px-col>
    </px-row> -->

    <px-row v-if="visualData.sumCur != null" style="height: calc(100% - 96px); margin: 10px 0 16px 16px">
      <px-col :span="6" style="position: relative" lass="water_col">
        <div class="whitebg" />
        <div class="waterdom borderRidus boxShadow">
          <modelTitle :title="'碳排放总览'" />
          <div class="model_chart" style="margin-top: 16px">
            <div class="accountingTop">
              <img class="accountingTopicon" src="@/assets/images/tanpaifangfenxi.png" />
              <p class="accountingTop1">年度碳排放量</p>
              <p class="accountingTop2">
                <span>{{ visualData?.sumCur ? visualData?.sumCur : "-" }}</span
                >tCO2e
              </p>
              <p class="accountingTop3">同比</p>
              <p class="accountingTop4">
                {{ visualData.sumRatio ? Math.abs(visualData.sumRatio) : "-" }} %
                <span v-if="visualData.sumRatio > 0">
                  <px-icon color="#ef4444" style="font-size: 12px !important">
                    <Top />
                  </px-icon>
                </span>
                <span v-if="visualData.sumRatio < 0">
                  <px-icon color="#10b981" style="font-size: 12px !important">
                    <Bottom />
                  </px-icon>
                </span>
                <span v-if="visualData.sumRatio == null" />
              </p>
            </div>
            <div v-if="visualData?.category">
              <div v-for="(item, index) in visualData.category" :key="index" class="accountingcenter">
                <px-tooltip class="box-item" effect="dark" :content="item.name" placement="top">
                  <p class="accountingcenter1">{{ item.name }}</p>
                </px-tooltip>

                <p class="accountingcenter2">
                  <span>{{ item.cur }}</span
                  >tCO2e
                </p>
                <p class="accountingcenter3">同比</p>
                <p class="accountingcenter4">
                  {{ item.ratio ? Math.abs(item.ratio) : "-" }}%
                  <span v-if="item.ratio > 0">
                    <px-icon color="#ef4444" style="font-size: 12px !important">
                      <Top />
                    </px-icon>
                  </span>
                  <span v-if="item.ratio < 0">
                    <px-icon color="#10b981" style="font-size: 12px !important">
                      <Bottom />
                    </px-icon>
                  </span>
                  <span v-if="item.ratio == null" />
                </p>
              </div>
            </div>
          </div>
        </div>
      </px-col>
      <px-col :span="12" />
      <px-col :span="6" style="position: relative" class="water_col">
        <div class="whitebg" />
        <div class="waterdom borderRidus boxShadow">
          <modelTitle :title="'碳排放明细'" />
          <div class="model_chart" style="margin-top: 16px">
            <px-table style="margin-top: 16px; opacity: 0.8" height="calc(100vh - 304px)" :data="visualData.facility" show-overflow-tooltip>
              <px-table-column type="index" label="排行" width="60" />
              <px-table-column label="设施活动量" prop="carbonEmission">
                <template #default="scope">
                  <span>{{ scope.row.name }}</span>
                </template>
              </px-table-column>
              <px-table-column label="碳排放（tCO₂e）" prop="momValue">
                <template #default="scope">
                  <span>{{ scope.row.cur }}</span>
                </template>
              </px-table-column>
              <px-table-column label="同比" prop="ratio">
                <template #default="scope">
                  <span>{{ scope.row.ratio ? scope.row.ratio : "-" }}%</span>
                </template>
              </px-table-column>
            </px-table>
          </div>
        </div>
      </px-col>
    </px-row>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref, toRefs, reactive, onMounted } from "vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import { accountingEmissionDatagetEmissionVisual } from "@/api/doubleCarbonManage/visual";
import yearPicker from "@/views/common/energy/components/yearPicker.vue";
import { accountingTemplatequery } from "@/api/doubleCarbonManage/accountingBoundary";
defineProps({
  visualData: {
    type: Object,
    required: true,
    default: () => {
      return {
        facility: [],
        sumCur: "",
        sumRatio: "",
        category: []
      };
    }
  }
});
const dateValue = ref<any>({ startYear: new Date().getFullYear() - 4, endYear: new Date().getFullYear() });
const updateStatisticYear: any = (startYear: number, endYear: number) => {
  console.log("选中年份", startYear, endYear);
  queryParams.value.Time = [startYear.toString(), endYear.toString()];
  queryParams.value.startDate = `${startYear}-01-01 00:00:00`;
  queryParams.value.endDate = `${endYear}-12-31 23:59:59`;
};
const settime = val => {
  console.log(val);
  queryParams.value.startDate = `${val[0]}-01 00:00:00`;
  queryParams.value.endDate = `${val[1]}-31 23:59:59`;
};
const settime2 = val => {
  console.log(val);
  queryParams.value.startDate = val[0];
  queryParams.value.endDate = val[1];
};
const data = reactive({
  dataValueObj: {},
  queryParams: {
    dimension: "M",
    startDate: "",
    endDate: "",
    Time: [],
    Time1: [],
    Time2: [],
    lev: null,
    templateId: ""
  },
  typeList: [],
  dimensionList: [
    {
      itemName: "月度",
      itemValue: "M"
    },
    {
      itemName: "年度",
      itemValue: "Y"
    }
  ],
  // visualData: {},
  visualImage: ""
});
const { dataValueObj, queryParams, typeList, dimensionList, visualImage } = toRefs(data);
const liquidList = [
  {
    itemName: "全厂",
    itemValue: null
  },
  {
    itemName: "创新中心一期",
    itemValue: "创新中心一期"
  },
  {
    itemName: "创新中心二期",
    itemValue: "创新中心二期"
  }
];
const { proxy }: any = getCurrentInstance();
const setStyle = (groupValue?: string) => {
  visualImage.value = groupValue
    ? proxy.useGetStaticUrl(`/ifp-web-static/image/common/shuangtanvisual.png`)
    : proxy.useGetStaticUrl("/ifp-web-static/image/common/shuangtanvisual.png");
};
onMounted(() => {
  setStyle();
  if (queryParams.value.dimension == "Y") {
    queryParams.value.startDate = `${new Date().getFullYear() - 4}-01-01 00:00:00`;
    queryParams.value.endDate = `${new Date().getFullYear()}-12-31 23:59:59`;
  } else {
    if (new Date().getMonth() == 0) {
      queryParams.value.startDate = `${new Date().getFullYear() - 1}-01-01 00:00:00`;
      queryParams.value.endDate = `${new Date().getFullYear() - 1}-12-31 23:59:59`;
      queryParams.value.Time1 = [`${new Date().getFullYear() - 1}-01`, `${new Date().getFullYear() - 1}-12`];
    } else {
      queryParams.value.startDate = `${new Date().getFullYear()}-01-01 00:00:00`;
      queryParams.value.endDate = `${new Date().getFullYear()}-12-31 23:59:59`;
      queryParams.value.Time1 = [`${new Date().getFullYear()}-01`, `${new Date().getFullYear()}-12`];
    }
  }
  accountingTemplatequery({
    orderByColumn: "",
    isAsc: "",
    templateName: "",
    templateStatus: "",
    orderBy: "",
    pageNum: 1,
    pageSize: 999
  }).then((response: any) => {
    typeList.value = response.data;
    queryParams.value.templateId = response.data[0]?.id;
    // getList();
  });
});
const handleQuery = () => {
  // getList();
};
const resetQuery = () => {
  queryParams.value.startDate = `${new Date().getFullYear()}-01-01 00:00:00`;
  queryParams.value.endDate = `${new Date().getFullYear()}-12-31 23:59:59`;
  queryParams.value.Time1 = [`${new Date().getFullYear()}-01`, `${new Date().getFullYear()}-12`];
  queryParams.value.dimension = "M";
  queryParams.value.lev = null;
  // getList();
};
// const getList = () => {
//   accountingEmissionDatagetEmissionVisual({
//     startDate: queryParams.value.startDate,
//     endDate: queryParams.value.endDate,
//     level: queryParams.value.lev,
//     templateId: queryParams.value.templateId
//   }).then(res => {
//     console.log(res);
//     visualData.value = res;
//   });
// };
</script>

<style scoped lang="scss">
.visualbg {
  position: absolute;
  top: -50%;
  left: 0%;
  display: block;
  width: 100%;
}

.water_col {
  height: 100%;
}

.waterdom {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 16px 24px;
  border-radius: 4px;
}

.first_width {
  width: calc(100% - 16px);
}

.boxShadow {
  box-shadow: 0 0 10px rgb(0 37 86 / 12%);
}

.whitebg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0.6;
}

.accountingTop {
  position: relative;
  width: 100%;
  height: 89px;
  margin-bottom: 16px;
  border-bottom: 1px solid #ccc;
}

.accountingTopicon {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 48px;
  height: 48px;
}

.accountingTop1 {
  position: absolute;
  top: 0;
  left: 70px;
  font-size: 18px;
  font-weight: 600;
}

.accountingTop2 {
  position: absolute;
  top: 40px;
  left: 70px;
  font-size: 16px;

  span {
    font-size: 18px;
    font-weight: 600;
    color: #3b82f6;
  }
}

.accountingTop3 {
  position: absolute;
  top: 0;
  left: 250px;
  font-size: 18px;
  font-weight: 600;
}

.accountingTop4 {
  position: absolute;
  top: 40px;
  left: 250px;
  font-size: 18px;
  font-weight: 600;
}

.accountingcenter {
  position: relative;
  width: 100%;
  height: 100px;
}

.accountingcenter1 {
  position: absolute;
  top: 0;
  left: 10px;
  width: 200px;
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountingcenter2 {
  position: absolute;
  top: 40px;
  left: 10px;
  font-size: 16px;

  span {
    font-size: 18px;
    color: #3b82f6;
  }
}

.accountingcenter3 {
  position: absolute;
  top: 0;
  left: 250px;
  font-size: 18px;
}

.accountingcenter4 {
  position: absolute;
  top: 40px;
  left: 250px;
  font-size: 18px;
}

:deep(.px-table__header) {
  thead {
    tr {
      background-color: #e7eefb !important;

      th {
        font-size: 13px;
        font-weight: bold;
        color: #000;
        background-color: #e7eefb !important;
      }
    }
  }
}

:deep(.px-table--isfixedHeader .px-table__header-wrapper .px-table-fixed-column--right) {
  background-color: #e7eefb !important;
}
</style>
